<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
</head>

<body>
  <!-- 

        描述
请补全JavaScript代码，将预设代码中的"people"数组渲染在页面中。实现下面的列表：
牛油1号 20岁
牛油2号 21岁
牛油3号 19岁
       -->
  <ul></ul>

  <script>
    var people = [
      { name: '牛油1号', id: 1, age: 20 },
      { name: '牛油2号', id: 2, age: 21 },
      { name: '牛油3号', id: 3, age: 19 },
    ]
    var ul = document.querySelector('ul');
    // 补全代码
    
    // 创建文档碎片
    let frg = document.createDocumentFragment()
    for (let i = 0; i < people.length; i++) {
      let liEl = document.createElement('li')
      liEl.innerHTML  = `${people[i].name} ${people[i].age}岁`
      // 先插入到文档碎片中
      frg.append(liEl)
    }
    ul.append(frg)
  </script>
</body>

</html>